import React,{PureComponent} from 'react'
import {View, Text,StyleSheet,TouchableOpacity,Button,Image} from 'react-native'
import {PageModal,Form,Input,Imagepicker } from 'beeshell'
import Icon2 from 'react-native-vector-icons/AntDesign'
import {setVaribles,colors,fontSize} from 'beeshell/common/styles/varibles'
import { race } from 'rsvp';


const FormItem = Form.Item;
setVaribles({
    colors: {
        brandPrimary: '#dda95e',
        brandSuccess: '#5cb85c',
        brandInfo: '#01c2ff',
        brandWarning: '#f0ad4e',
        brandDanger: '#d9534f',
    },

    fontSize: {
        base: 18,

    }
})
export default class ShopAdd extends PureComponent{
    constructor(props) {
        super(props)
        this.state = {
        }
    }

    render() {
        const configs = {
            title: '上传图片',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '拍照',
            chooseFromLibraryButtonTitle: '从图库上传',
            maxWidth: 1600,
            maxHeight: 1200,
            isAllowCrop: true,
            isAllowRotate: true,
            aspectX: 4,
            aspectY: 3,
            quality: 1,

            customButtons: {
                delImage: {
                    title: '删除',
                    position: 'top',
                    brandColor: 'brandWarning',
                },

            },

            responseFileType: 'base64',

            callback(res) {
                console.log(res);
            },

            onCustomButtonPress(btn) {
                console.log(btn);
            }
        }
        
        return (
            <View style={styles.addShop}>
                <Form>
                    <FormItem prop="name" label="门店名称" labelWidth={70}  hasLine>
                        <Input value="" textAlign="right" placeholder="请输入门店名称" onChange={() => {}} />
                    </FormItem>
                    <FormItem prop="phone" label="联系电话" labelWidth={70} hasLine>      
                        <Input value="" textAlign="right" placeholder="请输入联系电话" onChange={() => {}} />
                    </FormItem>
                    <FormItem prop="add" label="门店地址" labelWidth={70} hasLine>      
                        <Input value="" textAlign="right" placeholder="请输入门店地址" onChange={() => {}} />
                    </FormItem>
                    <TouchableOpacity
                         style={styles.addPhoto}
                        onPress={() => {
                            this._imagepicker.open();
                        }}>
                        <Text style={[{color:commonStyle.borderColor},commonStyle.titleFont]}>门店照片</Text>
                        <View style={styles.photoRight}>
                            <Image
                                style={{width:30,height:30,borderRadius:30,marginRight:5,}}
                                source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
                            />
                            <Icon2 name='right' size={16} color="#dddddd" /> 
                        </View>
                    </TouchableOpacity>  
                </Form>
                <TouchableOpacity
                    style={styles.shopBtn}
                    onPress={() => {
                        this._imagepicker.open();
                    }}>
                    <Text style={styles.btnText}>确认添加</Text>
                </TouchableOpacity>
                
                {/* <Button style={styles.shopBtn} type='primary' size="md" >确认添加</Button> */}
                <Imagepicker
                    ref={(c) => {
                        this._imagepicker = c;
                    }}
                    {...configs}>
                </Imagepicker>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    addShop:{
        flex:1,
        backgroundColor:'#f6f6f6'
    },
    addPhoto:{
        backgroundColor:'#fff',
        padding:15,
        flexDirection:'row',
        alignItems:'center',
        justifyContent: 'space-between',
    },
    photoRight:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent: 'space-between',
    },
    shopBtn:{
        margin:15,
        marginTop:30,
        padding:15,
        borderRadius:5,
        backgroundColor:commonStyle.textGoldColor,
        alignItems:'center',
        justifyContent: 'center',
    },
    btnText:{
        color:'#fff',
        fontSize:16,
    },
})